<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;"
    :key="componentKey">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入账号" v-decorator.trim="[ 'username', validatorRules.username]" :readOnly="!!model.id"/>
        </a-form-item>

        <template v-if="!model.id">
          <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <a-input-password type="password" placeholder="请输入登录密码" v-decorator="[ 'password',validatorRules.password]" />
          </a-form-item>

          <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <a-input-password type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
          </a-form-item>
        </template>

        <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input placeholder="请输入姓名" v-decorator.trim="[ 'realname', validatorRules.realname]" />
        </a-form-item>
        <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入手机号码" :disabled="isDisabledAuth('user:form:phone')" v-decorator="[ 'phone', validatorRules.phone]" />
        </a-form-item>
        <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入邮箱" v-decorator="[ 'email', validatorRules.email]" />
        </a-form-item>

        <a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入工号" v-decorator.trim="[ 'workNo', validatorRules.workNo]" />
        </a-form-item>

        <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <!-- <j-select-position placeholder="请选择职务" :multiple="false" v-decorator="['post', {}]"/> -->
          <a-select
            style="width: 100%"
            placeholder="请选择职务"
            showSearch
            optionFilterProp="children"
            :autoClearSearchValue="false"
            allowClear
            v-decorator="['post', {}]"
            :getPopupContainer="(target) => target.parentNode">
            <a-select-option v-for="(item, index) in postionList" :key="index.toString()" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >
          <a-select
            mode="multiple"
            :disabled="departDisabled"
            style="width: 100%"
            placeholder="请选择用户角色"
            optionFilterProp="children"
            v-model="selectedRole"
            :getPopupContainer="(target) => target.parentNode">
            <a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.id">
              {{ role.roleName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <!--部门分配-->
        <a-form-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
          <a-tree-select
            style="width: 100%"
            :dropdown-style="{ maxHeight: '500px', overflow: 'auto' }"
            placeholder="请选择部门"
            showSearch
            treeNodeFilterProp="title"
            allow-clear
            treeDefaultExpandAll
            :tree-data="departTreeData"
            v-decorator="['departId']"
            :getPopupContainer="(target) => target.parentNode"
            :multiple="true"
            @change="(departId, label, extra) => changeDepart(departId, label)">
          </a-tree-select>
        </a-form-item>
        <a-form-item label="是否部门负责" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group
            v-model="identity"
            @change="identityChange">
            <a-radio value="0">否</a-radio>
            <a-radio value="1">是</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="departIdShow==true">
          <a-select
            style="width: 100%"
            :dropdown-style="{ maxHeight: '500px', overflow: 'auto' }"
            placeholder="请选择负责部门"
            allow-clear
            treeDefaultExpandAll
            mode="multiple"
            :getPopupContainer="(target) => target.parentNode"
            :options="departsTreeData"
            v-decorator="['departIds']">
          </a-select>
        </a-form-item>
        <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="avatar-uploader" text="上传" v-decorator="['avatar']" ></j-image-upload>
        </a-form-item>

        <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            placeholder="请选择生日"
            v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"
            :getCalendarContainer="node => node.parentNode"/>
        </a-form-item>

        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别" :getPopupContainer="(target) => target.parentNode">
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="2">女</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入座机" v-decorator="[ 'telephone', validatorRules.telephone]"/>
        </a-form-item>
      </a-form>
    </a-spin>
    <depart-window ref="departWindow" @ok="modalFormOk"></depart-window>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import pick from 'lodash.pick'
  import moment from 'moment'
  import Vue from 'vue'
  // 引入搜索部门弹出框的组件
  import DepartWindow from '@/views/system/depart/modules/DepartWindow.vue'
  import JSelectPosition from '@comp/jeecgbiz/JSelectPosition.vue'
  import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
  import { duplicateCheck, apiUrl } from '@api/api'
  import { disabledAuthFilter } from '@/utils/authFilter'
  import JImageUpload from '@comp/jeecg/JImageUpload'
  import { addUser, editUser, queryAllRole, queryUserRole, getUserDepartIdsList } from '../service';
  import { queryTenantList } from '@views/user/service';
  import { queryByTenantId } from '@views/system/position/service';
  import { queryDepartByTenantId } from '@views/system/user/service';

  export default {
    name: 'UserModal',
    components: {
      JImageUpload,
      DepartWindow,
      JSelectPosition
    },
    data () {
      return {
        componentKey: 0,
        departDisabled: false, // 是否是我的部门调用该页面
        roleDisabled: false, // 是否是角色维护调用该页面
        modalWidth: 800,
        drawerWidth: 700,
        modaltoggleFlag: true,
        confirmDirty: false,
        selectedDepartKeys: [], // 保存用户选择部门id
        checkedDepartKeys: [],
        departTreeData: [],
        departsTreeData: [],
        userId: '', // 保存用户id
        disableSubmit: false,
        userDepartModel: { userId: '', departIdList: [], currentTenant: [] }, // 保存SysUserDepart的用户部门中间表数据需要的对象
        dateFormat: 'YYYY-MM-DD',
        validatorRules: {
          username: { rules: [{ required: true, message: '请输入账号!' }, { validator: this.validateUsername }] },
          password: { rules: [{ required: true, pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,16}$/, message: '密码由8-16位数字、大小写字母和特殊符号组成!' }, { validator: this.validateToNextPassword }] },
          confirmpassword: { rules: [{ required: true, message: '请重新输入登录密码!' }, { validator: this.compareToFirstPassword }] },
          realname: { rules: [{ required: true, message: '请输入姓名!' }, { validator: this.validateRealName }] },
          phone: { rules: [{ validator: this.validatePhone }] },
          email: {
            rules: [{
              validator: this.validateEmail
            }]
          },
          roles: {},
          workNo: { rules: [{ validator: this.validateWorkNo }] },
          telephone: { rules: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }] }
        },
        departIdShow: false,
        departIds: [], // 负责部门id
        title: '操作',
        visible: false,
        model: {},
        roleList: [],
        postionList: [], // 职务
        selectedRole: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        tenantId: '',
        form: this.$form.createForm(this),
        picUrl: '',
        url: {
          fileUpload: apiUrl.fileUpload
        },
        identity: '0',
        tenantList: [],
        currentTenant: []
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = { 'X-Access-Token': token }
      this.tenantId = Vue.ls.get(TENANT_ID);
      this.initTenantList();
      this.initPositionList();
    },
    computed: {
      uploadAction: function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      isDisabledAuth(code) {
        return disabledAuthFilter(code);
      },
      initTenantList() {
        queryTenantList().then(res => {
          if (res.success) {
            this.tenantList = res.result
          }
        })
      },
      initDepartList(tenantId) {
        if (tenantId) {
          queryDepartByTenantId(tenantId).then(res => {
            if (res.success) {
              this.departTreeData = res.result
            }
          })
        } else {
          this.departTreeData = []
        }
      },
      changeDepart(departIds, labels) {
        let that = this
        this.form.resetFields('departIds', '');
        if (departIds && departIds.length > 0) {
          that.departsTreeData = [];
          departIds.forEach(function (item, i) {
            that.departsTreeData.push({ value: item, label: labels[i] })
          })
        } else {
          that.departsTreeData = [];
        }
      },
      // 窗口最大化切换
      toggleScreen() {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth;
        } else {
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      initialRoleList() {
        queryAllRole().then((res) => {
          if (res.success) {
            this.roleList = res.result;
          } else {
            console.log(res.message);
          }
        });
      },
      loadUserRoles(userid) {
        queryUserRole(userid).then((res) => {
          if (res.success) {
            this.selectedRole = res.result;
          } else {
            console.log(res.message);
          }
        });
      },
      refresh () {
          this.selectedDepartKeys = [];
          this.checkedDepartKeys = [];
          this.userId = '';
          this.departId = [];
          this.departIdShow = false;
          this.currentTenant = [];
      },
      add () {
        this.picUrl = '';
        this.refresh();
        this.edit({});
      },
      edit (record) {
        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        let that = this;
        that.initialRoleList();
        that.initDepartList(this.tenantId);

        that.form.resetFields();
        if (record.hasOwnProperty('id')) {
          that.loadUserRoles(record.id);
        }
        that.userId = record.id;
        that.visible = true;
        that.model = Object.assign({}, record);
        if (that.postionList.filter(i => { return i.id === that.model.post }).length === 0) {
          this.model.post = null;
        }
        this.model.departId = record.belongDepartIds ? record.belongDepartIds.split(',') : undefined;
        this.model.departIds = record.departIds ? record.departIds.split(',') : undefined;
        that.$nextTick(() => {
          that.form.setFieldsValue(pick(this.model, 'username', 'sex', 'realname', 'email', 'phone', 'workNo', 'telephone', 'post', 'avatar', 'departId', 'departIds'))
        });

        if (that.model.departIds) {
          that.changeDepart(that.model.belongDepartIds.split(','), that.model.departNames.split(','))
          this.identity = '1';
          this.departIdShow = true;
        } else {
          this.identity = '0';
          this.departIdShow = false;
        }
        // 调用查询用户对应的部门信息的方法
        that.checkedDepartKeys = [];
        if (!record.relTenantIds || record.relTenantIds.length === 0) {
          if (this.userDepartModel.currentTenant && this.userDepartModel.currentTenant.length > 0) {
            this.currentTenant = [...this.userDepartModel.currentTenant];
          } else {
            this.currentTenant = []
          }
        } else {
          this.currentTenant = record.relTenantIds.split(',').map(Number);
        }
      },
      loadCheckedDeparts() {
        let that = this;
        if (!that.userId) { return }
        getUserDepartIdsList(that.userId).then((res) => {
          if (res.success) {
            var depart = [];
            var departId = [];
            for (let i = 0; i < res.result.length; i++) {
              that.checkedDepartKeys.push(res.result[i].key);
              // 新增负责部门选择下拉框
              depart.push({
                  key: res.result[i].key,
                  title: res.result[i].title
              })
              departId.push(res.result[i].key)
            }
            that.resultDepartOptions = depart;
            // 判断部门id是否存在，不存在择直接默认当前所在部门
            if (this.model.departIds) {
                this.departIds = this.model.departIds.split(',');
            } else {
                this.departIds = departId;
            }
            that.userDepartModel.departIdList = that.checkedDepartKeys
          } else {
            console.log(res.message);
          }
        })
      },

      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
        this.userDepartModel = { userId: '', departIdList: [] };
        this.checkedDepartKeys = [];
        this.selectedDepartKeys = [];
        this.resultDepartOptions = [];
        this.departIds = [];
        this.departIdShow = false;
        this.identity = '1';
      },
      moment,
      handleSubmit () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            if (!values.birthday) {
              values.birthday = '';
            } else {
              values.birthday = values.birthday.format(this.dateFormat);
            }
            let formData = Object.assign(this.model, values);

            // update-begin-author:taoyan date:2020710 for:多租户配置
            formData.relTenantIds = that.currentTenant.length > 0 ? that.currentTenant.join(',') : ''
            // update-end-author:taoyan date:2020710 for:多租户配置
            formData.selectedroles = that.selectedRole.length > 0 ? that.selectedRole.join(',') : '';
            if (!that.roleDisabled) {
              formData.selecteddeparts = that.userDepartModel.departIdList.length > 0 ? that.userDepartModel.departIdList.join(',') : '';
            } else {
              if (formData.departId != null && formData.departId !== undefined && formData.departId !== ''){

                formData.selecteddeparts = formData.departId.length > 0 ? formData.departId.join(',') : '';
              }
            }

            // formData.userIdentity = this.identity;
            // 如果是上级择传入departIds,否则为空
            if (that.identity === '1') {
              // formData.departIds = that.departIds.join(',');
              formData.departIds = formData.departIds.join(',');
              formData.userIdentity = 3
            } else {
              formData.departIds = '';
              formData.userIdentity = 0;
            }
            // that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
            let obj;
            if (!this.model.id) {
              formData.id = that.userId;
              obj = addUser(formData);
            } else {
              obj = editUser(formData);
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              // that.checkedDepartNames = [];
              that.userDepartModel.departIdList = { userId: '', departIdList: [] };
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      validateToNextPassword  (rule, value, callback) {
        const form = this.form;
        const confirmpassword = form.getFieldValue('confirmpassword');

        if (value && confirmpassword && value !== confirmpassword) {
          callback('两次输入的密码不一样！');
        }
        if (value && this.confirmDirty) {
          form.validateFields(['confirmpassword'], { force: true })
        }
        callback();
      },
      compareToFirstPassword  (rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('两次输入的密码不一样！');
        } else {
          this.confirmDirty = false
          form.validateFields(['password'], { force: true })
          callback()
        }
      },
      validatePhone(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          // update-begin--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------
          if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
            // update-end--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------

            var params = {
              tableName: 'sys_user',
              fieldName: 'phone',
              fieldVal: value,
              dataId: this.userId,
              delFlag: 'del_flag',
              delFlagValue: 0
            };
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback('手机号已存在!')
              }
            })
          } else {
            callback('请输入正确格式的手机号码!');
          }
        }
      },
      validateEmail(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (value.length < 51) {
            if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
              var params = {
                tableName: 'sys_user',
                fieldName: 'email',
                fieldVal: value,
                dataId: this.userId
              };
              duplicateCheck(params).then((res) => {
                console.log(res)
                if (res.success) {
                  callback()
                } else {
                  callback('邮箱已存在!')
                }
              })
            } else {
              callback('请输入正确格式的邮箱!')
            }
          } else {
            callback('邮箱的长度不能大于50个字符!')
          }
        }
      },
      validateUsername(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (value.length < 21) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'username',
              fieldVal: value,
              dataId: this.userId,
              delFlag: 'del_flag',
              delFlagValue: 0
            };
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback('用户名已存在!')
              }
            })
          } else {
            callback('用户名长度不能大于20个字符!')
          }
        }
      },
      validateRealName(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (value.length < 21) {
            callback()
          } else {
            callback('用户姓名长度不能大于20个字符!')
          }
        }
      },
      validateWorkNo(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (value.length < 16) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'work_no',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback('工号已存在!')
              }
            })
          } else {
            callback('工号长度小于15个字符！')
          }
        }
      },
      handleConfirmBlur  (e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value
      },
      beforeUpload: function(file) {
        var fileType = file.type;
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
        // TODO 验证文件大小
      },
      handleChange (info) {
        this.picUrl = '';
        if (info.file.status === 'uploading') {
          this.uploadLoading = true;
          return
        }
        if (info.file.status === 'done') {
          let response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          if (response.success) {
            this.model.avatar = response.message;
            this.picUrl = 'Has no pic url yet';
          } else {
            this.$message.warning(response.message);
          }
        }
      },
      // 搜索用户对应的部门API
      onSearch() {
        this.$refs.departWindow.add(this.checkedDepartKeys, this.userId);
      },

      // 获取用户对应部门弹出框提交给返回的数据
      modalFormOk (formData) {
        // this.checkedDepartNames = [];
        this.selectedDepartKeys = [];
        // this.checkedDepartNameString = '';
        this.userId = formData.userId;
        this.userDepartModel.userId = formData.userId;
        this.departIds = [];
        this.resultDepartOptions = [];
        var depart = [];
        for (let i = 0; i < formData.departIdList.length; i++) {
          this.selectedDepartKeys.push(formData.departIdList[i].key);
          // 新增部门选择，如果上面部门选择后不为空直接付给负责部门
          depart.push({
              key: formData.departIdList[i].key,
              title: formData.departIdList[i].title
          })
          this.departIds.push(formData.departIdList[i].key)
        }
        this.resultDepartOptions = depart;
        this.userDepartModel.departIdList = this.selectedDepartKeys;
        this.checkedDepartKeys = this.selectedDepartKeys // 更新当前的选择keys
       },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth;
        } else {
          this.drawerWidth = 700;
        }
      },
      identityChange(e) {
        if (e.target.value === '0') {
            this.departIdShow = false;
        } else {
            this.departIdShow = true;
        }
      },
      initPositionList() {
        queryByTenantId(this.tenantId).then(res => {
          if (res.success) {
            this.postionList = [...res.result]
          }
        })
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
